<template>
	<div>
		<el-card class="box-card">
			<div class="Serach_b">
				<el-input v-model="fy.memberId" type="input" autosize placeholder="请输入会员ID"
					@keyup.enter.native="seachEnter" style="width: 300px;margin-left: 20px;" />
				<el-select v-model="fy.isNotDo" placeholder="请选择订单状态" clearable>
					<el-option label="未处理" :value="1" />
				</el-select>
				<el-button type="primary" icon="el-icon-search" @click="SearchData()">搜索</el-button>
				<!-- <el-button type="primary" @click="handleExport()">导出</el-button> -->
			</div>
			<el-table :data="PayLogManageList" border>
				<el-table-column prop="memberId" label="会员ID" />
				<el-table-column prop="username" label="用户名/手机号" />
				<!-- <el-table-column prop="orderNo" label="订单号" /> -->
				<el-table-column prop="totalFee" label="支付金额（元）" />
				<el-table-column prop="remittanceAccount" label="汇款账户" />
				<el-table-column prop="cardholder" label="持卡人" />
				<el-table-column label="转账截图" width="130px">
					<template slot-scope="scope">
						<el-image v-for="(item, index) in scope.row.screenshotTransferUrl" :key="index"
							style="width: 100px; height: 100px" :src="item"
							:preview-src-list="scope.row.screenshotTransferUrl" />
					</template>
				</el-table-column>
				<el-table-column label="财务审核状态">
					<template slot-scope="scope">
						<span v-if="scope.row.financingReviewStatus == 0">未审核</span>
						<span v-if="scope.row.financingReviewStatus == 1">通过</span>
						<span v-if="scope.row.financingReviewStatus == 2">驳回</span>
					</template>
				</el-table-column>
				<el-table-column prop="financingAuditOpinion" label="财务审核意见" />
				<el-table-column label="管理员审核状态">
					<template slot-scope="scope">
						<span v-if="scope.row.manageReviewStatus == 0">未审核</span>
						<span v-if="scope.row.manageReviewStatus == 1">通过</span>
						<span v-if="scope.row.manageReviewStatus == 2">驳回</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="manageAuditOpinion" label="管理员审核意见" /> -->
				<!-- <el-table-column prop="remark" label="备注" /> -->
				<el-table-column prop="createTime" label="创建时间" width="100px" />
				<el-table-column prop="updateTime" label="更新时间" width="100px" />
				<el-table-column prop="financingAuditId" label="财务审核id" width="100px" />
				<el-table-column prop="manageReviewId" label="管理员审核id" width="100px" />
				<el-table-column label="操作" width="120px">
					<template slot-scope="scope">
						<div class="button">
							<el-button v-if="scope.row.financingReviewStatus === 0" type="info" size="mini"
								@click="ClickCWSh(scope.row)">财务审核</el-button>
							<div v-if="scope.row.financingReviewStatus === 1">
								<el-button v-if="scope.row.manageReviewStatus === 0" type="warning" size="mini"
									@click="ClickGLYSH(scope.row)">管理员审核</el-button>
							</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog title="财务审核" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
				<el-input v-model="input" placeholder="请输入财务审核意见" clearable />
				<span slot="footer" class="dialog-footer">
					<el-button @click="CWSh(2)">驳回</el-button>
					<el-button type="primary" @click="CWSh(1)">确 定</el-button>
				</span>
			</el-dialog>
			<el-dialog title="管理员审核" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
				<el-input v-model="input" placeholder="请输入管理员审核意见" clearable />
				<span slot="footer" class="dialog-footer">
					<el-button @click="GLYSH(2)">驳回</el-button>
					<el-button type="primary" @click="GLYSH(1)">确 定</el-button>
				</span>
			</el-dialog>
			<el-pagination :page-sizes="[10, 15]" :page-size="fy.size" layout="total, sizes, prev, pager, next, jumper"
				:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</el-card>
	</div>
</template>

<script>
	import * as SHpubicSearch from '@/api/PublicSearch'
	import * as PayLogManageApi from '@/api/Search'
	import {
		timestampToTime
	} from '@/utils/date'
	import ipconfig from '@/utils/ipconfig'
	export default {
		data() {
			return {
				ipconfig: ipconfig,
				timestampToTime,
				fy: {
					size: 10,
					current: 1
				},
				total: 0,
				dialogVisible: false,
				dialogVisible2: false,
				PayLogManageList: [],
				PayLogManageImageList: [],
				offlinePayLogId: '',
				input: '',
				auditOpinionList: [],
				time: ''
			}
		},
		created() {
			this.SearchData()
		},
		methods: {
			dateArrayTransfer(dateArray) {
				if (dateArray == null || dateArray == '') {
					return '无';
				}
				if (dateArray.length == 6) {
					var returnDate = dateArray[0] + "-" +
						this.returnDoubleNum(dateArray[1]) + "-" +
						this.returnDoubleNum(dateArray[2]) + " " +
						this.returnDoubleNum(dateArray[3]) + ":" +
						this.returnDoubleNum(dateArray[4]) + ":" +
						this.returnDoubleNum(dateArray[5]);
				} else {
					var returnDate = dateArray[0] + "-" +
						this.returnDoubleNum(dateArray[1]) + "-" +
						this.returnDoubleNum(dateArray[2]) + " " +
						this.returnDoubleNum(dateArray[3]) + ":" +
						this.returnDoubleNum(dateArray[4]) + ":00";
				}
				return returnDate;
			},
			returnDoubleNum(number) {
				return (Array(2).join(0) + number).slice(-2); //创建一个长度为2的数组，且默认用0填充；然后用传过来的数添加都右边，然后从右向左截取两位！
			},
			ClickCWSh(row) {
				this.dialogVisible = true
				this.offlinePayLogId = row.id
				this.input = ''
			},
			CWSh(value) {
				if (this.input != '') {
					SHpubicSearch.CWSH({
						offlinePayLogId: this.offlinePayLogId,
						auditStatus: value,
						auditOpinion: this.input,
						token: this.$store.getters.token
					}).then((res) => {
						if (res.data.data == false) {
							this.time = this.dateArrayTransfer(res.data.time)
							this.$confirm('已存在,时间：' + this.time)
								.then((_) => {
									done()
								})
								.catch((_) => {})
						}
						if (res.code === 200) {
							this.dialogVisible = false
							this.SearchData()
						} else {
							this.$message.error(res.message)
						}
					})
				} else {
					this.$confirm('意见不可为空')
						.then((_) => {
							done()
						})
						.catch((_) => {})
				}

			},
			GLYSH(value) {
				SHpubicSearch.GLYSH({
					offlinePayLogId: this.offlinePayLogId,
					auditStatus: value,
					auditOpinion: this.input,
					token: this.$store.getters.token
				}).then((res) => {
					if (res.code === 200) {
						this.dialogVisible2 = false
						this.SearchData()
					} else {
						this.$message.error(res.message)
					}
				})
			},
			ClickGLYSH(row) {
				this.dialogVisible2 = true
				this.offlinePayLogId = row.id
				this.input = ''
			},
			SearchData() {
				PayLogManageApi.InsertOrderPayLogManage(this.fy).then((res) => {
					this.total = res.data.total
					this.PayLogManageList = res.data.records
					this.PayLogManageList.map(item => {
						item.createTime = this.dateArrayTransfer(item.createTime)
						item.updateTime = this.dateArrayTransfer(item.updateTime)
					})
					this.PayLogManageList.forEach((item) => {
						if (item.screenshotTransferUrl) {
							const list = item.screenshotTransferUrl
								.split(',')
								.map((k) => ipconfig.image + k)
							if (list.length >= 1) {
								item.screenshotTransferUrl = list
							}
						}
					})
				})
			},
			handleSizeChange(value) {
				this.fy.size = value
				this.SearchData()
			},
			handleCurrentChange(value) {
				this.fy.current = value
				this.SearchData()
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then((_) => {
						done()
					})
					.catch((_) => {})
			},
			handleExport() {
				const params = {
					memberId: this.fy.memberId,
					isNotDo: this.fy.isNotDo
				}
				PayLogManageApi.outPutInfo(params).then((res) => {
					import('@/vendor/Export2Excel').then((excel) => {
						// 设置导出表格的头部
						const tHeader = [
							'会员ID',
							'用户名/手机号',
							'订单号',
							'支付金额(元)',
							'汇款账户',
							'持卡人',
							'财务审核状态',
							'财务审核意见',
							'管理员审核状态',
							'管理员审核意见',
							'创建时间',
							'更新时间',
							'财务审核id',
							'管理员审核id'
						]
						// 设置要导出的属性
						const filterVal = [
							'memberId',
							'username',
							'orderNo',
							'totalFee',
							'remittanceAccount',
							'cardholder',
							'financingReviewStatus',
							'financingAuditOpinion',
							'manageReviewStatus',
							'manageAuditOpinion',
							'createTime',
							'updateTime',
							'financingAuditId',
							'manageReviewId'
						]
						// 获取当前展示的表格数据
						const list = res.data.map((k) => {
							return {
								...k,
								productId: k.productId == 1 ? '收入' : '支出'
							}
						})
						// 将要导出的数据进行一个过滤
						const data = this.formatJson(
							filterVal,
							list
						)
						// 调用我们封装好的方法进行导出Excel
						excel.export_json_to_excel({
							// 导出的头部
							header: tHeader,
							// 导出的内容
							data,
							// 导出的文件名称
							filename: '对公转账审核',
							// 导出的表格宽度是否自动
							autoWidth: this.autoWidth,
							// 导出文件的后缀类型
							bookType: this.bookType
						})
					})
				})
			},
			// 对要导出的内容进行过滤
			formatJson(filterVal, jsonData) {
				return jsonData.map((v) =>
					filterVal.map((j) => {
						if (j === 'createTime') {
							return this.parseTime(v[j])
						} else if (j === 'financingReviewStatus') {
							if (v[j] === 0) {
								v[j] = '未审核'
								return v[j]
							} else if (v[j] === 1) {
								v[j] = '通过'
								return v[j]
							} else {
								v[j] = '驳回'
								return v[j]
							}
						} else if (j === 'manageReviewStatus') {
							if (v[j] === 0) {
								v[j] = '未审核'
								return v[j]
							} else if (v[j] === 1) {
								v[j] = '通过'
								return v[j]
							} else {
								v[j] = '驳回'
								return v[j]
							}
						} else {
							return v[j]
						}
					})
				)
			},
			// 过滤时间
			parseTime(time, cFormat) {
				if (arguments.length === 0) {
					return null
				}
				const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
				let date
				if (typeof time === 'object') {
					date = time
				} else {
					if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
						time = parseInt(time)
					}
					if (typeof time === 'number' && time.toString().length === 10) {
						time = time * 1000
					}
					date = new Date(time)
				}
				const formatObj = {
					y: date.getFullYear(),
					m: date.getMonth() + 1,
					d: date.getDate(),
					h: date.getHours(),
					i: date.getMinutes(),
					s: date.getSeconds(),
					a: date.getDay()
				}
				const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
					let value = formatObj[key]
					// Note: getDay() returns 0 on Sunday
					if (key === 'a') {
						return ['日', '一', '二', '三', '四', '五', '六'][value]
					}
					if (result.length > 0 && value < 10) {
						value = '0' + value
					}
					return value || 0
				})
				return timeStr
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-pagination {
		margin-top: 10px;
	}

	.box-card {
		width: 95%;
		margin: auto;
	}

	.button {
		display: flex;
	}

	.Serach_b {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.Serach_b .el-button {
		margin-left: 20px;
	}

	.Serach_b .el-input {
		width: 30%;
	}

	.el-input {
		width: 100%;
	}

	.el-select {
		margin-left: 20px;
	}
</style>
